<div class="modal fade in ip-box" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true" id="details" *ngIf="details">
    <div class="modal-dialog  modal-lg-f" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">IP规则管理 — 详情</h4>
            </div>
            <div class="modal-body">

                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 control-label text-right">IP规则名称：</label>
                    <div class="col-xs-12 col-sm-9">
                        <!-- <input type="text" 
                        	   name="ruleName" 
                        	   class="readonly form-control" 
                        	   readonly 
                             [value]="details.ruleName"
                               > -->
                        <p class="details-p">{{details.ruleName}}</p>       
                    </div>
                </div>
	
					
					<div class="form-group height-auto">
                        <label class="col-xs-12 col-sm-3 control-label text-right">优先级：</label>   
                        <div class="one-line col-xs-12 col-sm-3">
                                <p class="details-p" *ngIf="details.sortIndex==0">高</p>  
                                <p class="details-p" *ngIf="details.sortIndex==1">中</p>  
                                <p class="details-p" *ngIf="details.sortIndex==2">低</p>  
                               <!-- <input type="text" 
                                      class="readonly form-control" 
                                      readonly 
                                      value="高" 
                                      *ngIf="details.sortIndex==0"
                                      >
                                <input type="text" 
                                      class="readonly form-control" 
                                      readonly 
                                      value="中" 
                                      *ngIf="details.sortIndex==1"
                                      >
                                <input type="text" 
                                      class="readonly form-control" 
                                      readonly 
                                      value="低" 
                                      *ngIf="details.sortIndex==2"
                                      > -->
                        </div>

                        <label class="one-line col-xs-12 col-sm-3 control-label text-right">规则模式：</label>   
                        <div class="col-xs-12 col-sm-3">
                                <p class="details-p" *ngIf="details.ruleMode==0">禁止</p>  
                                <p class="details-p" *ngIf="details.ruleMode==1">允许</p>  
                            <!-- <input type="text"
                        		   class="readonly form-control" 
                        		   readonly
                                   value="禁止" 
                                   *ngIf="details.ruleMode==0"
                        		   >
                            <input type="text"
                                   class="readonly form-control" 
                                   readonly
                                   value="允许" 
                                   *ngIf="details.ruleMode==1"
                                   > -->
                        </div>
                    </div>

                    <div class="form-group height-auto">
                        <label class="col-xs-12 col-sm-3 control-label text-right">是否启用：</label>   
                        <div class="one-line col-xs-12 col-sm-3">
                                <p class="details-p" *ngIf="details.enabled==0">禁用</p>  
                                <p class="details-p" *ngIf="details.enabled==1">启用</p>  
                            <!-- <input type="text"
                                   class="readonly form-control" 
                                   value="禁用" 
                                   *ngIf="details.enabled==0"
                                   >
                            <input type="text"
                                   class="readonly form-control" 
                                   readonly
                                   value="启用" 
                                   *ngIf="details.enabled==1"
                                   > -->
                        </div>

                        <label class="one-line col-xs-12 col-sm-3 control-label text-right">创建人：</label>   
                        <div class="col-xs-12 col-sm-3">
                            <!-- <input type="text"
                                   class="readonly form-control" 
                                   readonly
                                   [value]="details.userName"
                                   > -->
                                   <p class="details-p" >{{details.userName}}</p> 
                        </div>
                    </div>

                <div class="form-group height-auto">
                    <label class="col-xs-12 col-sm-3 control-label text-right">IP表达式：</label>
                    <div class="col-xs-12 col-sm-9">
                        <!-- <input rows="5" 
                        		  type="text" 
                        		  name="description" 
                        		  class="readonly form-control" 
                        		  readonly 
                                  [value]="details.expression"
                                  >           -->
                                  <p class="details-p" >{{details.expression}}</p>                           
                    </div>
                </div>
                    
                    
                <div class="ip-page col-sm-12">
                	<h5>
                		<strong>IP表达式说明</strong>
                	</h5>
                	<p>1、xxx.xxx.xxx.xxx (一个确定的IP地址)。</p>
                	<p>2、使用 '|' 隔开每个IP子表达式。</p>
                	<p>3、IP段设置。 例如，'10.1' 表示所有以 '10.1.'开头的IP地址，如10.1.1.0 和 10.1.0.1 ,而不是 '10.12.1.1'。</p>
                	<p>4、使用 '-' 来设置一个IP范围。例如, '222.111-222.113'，比如包括 222.111.0.1,222.112.0.2, ...,222.113.0.254。</p>
                	<p>5、使用 '!'来排除IP地址。例如，'!222.111-222.113'，比如不包括 222.111.0.1,222.112.0.2, ...,222.113.0.254。</p>
                	<p>6、使用 '*' 来包含所有的IP地址。</p>
                	<p>7、使用 '!*' 来排除所有的IP地址。</p>
                	<p>8、'xxx.xxx' 等同于 'xxx.xxx.' 等同于 'xxx.xxx.*'</p>
                </div>

            </div>
            <div class="modal-footer ">
                <button type="button" class="btn btn-fff" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
